<div class="component procurement-list-component">
    <div class="procurement-list-panel panel-body">
        <div class="tool-bar">
            <div class="button-wrap">
                <div class="excel-export export-procurement-orders"></div>
            </div>
        </div>
        <ul class="nav nav-tabs">
            <li class="todo-li active"><a href=".todo-panel" data-toggle="tab">TODO</a></li>
            <li class="related-li"><a href=".related-panel" data-toggle="tab">Related</a></li>
        </ul>
        <div class="procurement-list-tab-content tab-content">
            <div class="todo-panel tab-pane fade in active">
                <div class="procurement-list todo-list">
                </div>
            </div>
            <div class="related-panel tab-pane fade">
                <div class="procurement-list related-list">
                </div>
            </div>
        </div>
    </div>

    <div class="templates">
        <div id="procurement-template" class="procurement-panel panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title"><a></a></h3>
            </div>
            <div class="panel-body">
                <div class="id-element">
                    <div class="id-label body-element-label">id:</div>
                    <div class="id-value body-element-value"></div>
                </div>
                <div class="code-element">
                    <div class="code-label body-element-label">code:</div>
                    <div class="code-value body-element-value"></div>
                </div>
                <div class="name-element">
                    <div class="name-label body-element-label">name:</div>
                    <div class="name-value body-element-value"></div>
                </div>
                <div class="description-element">
                    <div class="description-label body-element-label">description:</div>
                    <div class="description-value body-element-value"></div>
                </div>
                <div class="currentHandler-element">
                    <div class="currentHandler-label body-element-label">current handler:</div>
                    <div class="currentHandler-value body-element-value"></div>
                </div>
                <div class="creator-element">
                    <div class="creator-label body-element-label">creator:</div>
                    <div class="creator-value body-element-value"></div>
                </div>
                <div class="submitter-element">
                    <div class="submitter-label body-element-label">submitter:</div>
                    <div class="submitter-value body-element-value"></div>
                </div>
                <div class="reviewer-element">
                    <div class="reviewer-label body-element-label">reviewer:</div>
                    <div class="reviewer-value body-element-value"></div>
                </div>
                <div class="approver-element">
                    <div class="approver-label body-element-label">approver:</div>
                    <div class="approver-value body-element-value"></div>
                </div>
                <div class="status-element">
                    <div class="status-label body-element-label">status:</div>
                    <div class="status-value body-element-value"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<link type="text/css" rel="stylesheet"
    href="/static/clientlibs/tattoo/workflow/component/procurement-list-component/css/procurement-list-component.css"/>
<script type="text/javascript"
    src="/static/clientlibs/tattoo/workflow/component/procurement-list-component/js/procurement-list-component.js"></script>